<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('修改试题')" />
</head>
<body class="white-bg">
    <div id="app" class="wrapper wrapper-content animated fadeInRight ibox-content">
         <el-form ref="form" :model="form" :rules="rules" label-position="right" label-width="80px">
         	<el-row>
         		<el-col :span="12">
         			<el-form-item label="题目类型 " prop="quType">
         				<el-select v-model="form.quType" :disabled="quTypeDisabled" class="filter-item" @change="handleTypeChange">
			            	<el-option
				              v-for="item in quTypes"
				              :key="item.value"
				              :label="item.label"
				              :value="item.value"
				            />
			          	</el-select>
        			</el-form-item>
         		</el-col>
         		<el-col :span="12">
         			 <el-form-item label="难度等级 " prop="level">
			         	<el-select v-model="form.level" class="filter-item">
				            <el-option
				              v-for="item in levels"
				              :key="item.value"
				              :label="item.label"
				              :value="item.value"
				            />
			         	</el-select>
        			</el-form-item>
         		</el-col>
         	</el-row>
         	<el-row>
	         	<el-col :span="24">
	         		<el-form-item label="归属题库 " prop="repoId">
	         			<el-select v-model="form.repoId" filterable :multiple="false" placeholder="选择或搜索题库">
						    <el-option
						      v-for="item in form.repoList"
						      :key="item.id"
						      :label="item.title"
						      :value="item.id">
						    </el-option>
				    	</el-select>
	         		</el-form-item>
	         	</el-col>
         	</el-row>
         	<el-row>
	         	<el-col :span="24">
	         		<el-form-item label="题目内容" prop="content">
	          			<el-input v-model="form.content" type="textarea" />
	        		</el-form-item>
	         	</el-col>
         	</el-row>
         	<el-row>
	         	<el-col :span="24">
	         		<el-form-item label="整题解析" prop="analysis">
			        	<el-input v-model="form.analysis" type="textarea"  />
			        </el-form-item>
	         	</el-col>
         	</el-row>
         	<el-row>
         		<el-col :span="24">
	         		<el-button class="filter-item" type="primary" icon="el-icon-plus" size="small" plain @click="handleAdd">
		          		添加
		        	</el-button>
         		</el-col>
         	</el-row>
         	<el-row style="margin-top:25px;">
         		<el-col :span="24">
         			<el-table :data="form.answerList" :border="true"  style="width: 100%;" >
          				<el-table-column label="是否答案" width="120" align="center" >
            				<template slot-scope="scope">
              					<el-checkbox v-model="scope.row.isRight">答案</el-checkbox>
            				</template>
          				</el-table-column>
          				<el-table-column label="答案内容" >
				            <template slot-scope="scope">
				              <el-input v-model="scope.row.content" type="textarea" />
				            </template>
				        </el-table-column>
         				<el-table-column label="答案解析" >
				            <template slot-scope="scope">
				              <el-input v-model="scope.row.analysis" type="textarea" />
				            </template>
				        </el-table-column>
			          	<el-table-column label="操作"  align="center" width="100px" >
				            <template slot-scope="scope">
				              <el-button type="danger" icon="el-icon-delete" circle @click="removeItem(scope.$index)" />
				            </template>
			          	</el-table-column>
        			</el-table>
         		</el-col>
         	</el-row>
         </el-form>
	</div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript" >
    	var prefix = ctx + "exam/qu";
    	var repoListData = [[${repoList}]];
    	var id= [[${model.id}]];
    	var quType = [[${model.quType}]];
    	var level = [[${model.level}]];
    	var repoId = [[${model.repoId}]];
    	var content = [[${model.content}]];
    	var analysis = [[${model.analysis}]];
    	var answerList = [[${model.answerList}]];
		var vObj = new Vue({
			el: '#app',
			data(){
				return{
					quTypeDisabled: false,
					itemImage: true,
					levels: [
						{ value: '1', label: '普通' },
						{ value: '2', label: '较难' }
					],
					quTypes: [
					    {value: '1', label: '单选题' }, 
					    {value: '2', label: '多选题' },
					    {value: '3', label: '判断题' }
					],
					form:{
						quType:"",
						level:"",
						repoId: "",
						content:"",
						analysis:"",
						answerList: [],
						repoList:[],
						id:''
					},
					rules:{
						content: [
				        	{ required: true, message: '题目内容不能为空！' }
				        ],

				        quType: [
				        	{ required: true, message: '题目类型不能为空！' }
				        ],

				        level: [
				        	{ required: true, message: '必须选择难度等级！' }
				        ],
				        repoIds: [
				        	{ required: true, message: '必须选择一个题库！' }
				        ]
					}
				}
			},
			methods: {
				handleTypeChange(v){
					this.form.answerList = []
				    if (v === '3') {
				      this.form.answerList.push({ isRight: true, content: '正确', analysis: '' })
				      this.form.answerList.push({ isRight: false, content: '错误', analysis: '' })
				    }
				    if (v === '1' || v === '2') {
				      this.form.answerList.push({ isRight: false, content: '', analysis: '' })
				      this.form.answerList.push({ isRight: false, content: '', analysis: '' })
				      this.form.answerList.push({ isRight: false, content: '', analysis: '' })
				      this.form.answerList.push({ isRight: false, content: '', analysis: '' })
				    }
				},
				handleAdd(){
					this.form.answerList.push({ isRight: false, content: '', analysis: '' })
				},
				removeItem(index) {
					this.form.answerList.splice(index, 1);
				},
				submitForm(){
					let that = this;
					let rightCount = 0;
					this.form.answerList.forEach(function(item) {
						if (item.isRight) {
							rightCount += 1
						}
					})
					if (this.form.quType === '1') {
				    	if (rightCount !== 1) {
				        	this.$message({
					            message: '单选题答案只能有一个',
					            type: 'warning'
				          	})
				        	return false;
				        }
      				}
					if (this.form.quType === '2') {
				        if (rightCount < 2) {
			            	this.$message({
					            message: '多选题至少要有两个正确答案！',
					            type: 'warning'
				          	})
			          		return
				        }
					}
			        if (this.form.quType === '3') {
				        if (rightCount !== 1) {
				        	this.$message({
					            message: '判断题只能有一个正确项！',
					            type: 'warning'
				          	})
				          	return
				        }
			        }
			        this.$refs.form.validate((valid) => {
			        	if (!valid) {
			                return
			            }
			        	var formData = {};
			        	formData.id = that.form.id;
			        	formData.quType=that.form.quType;
			        	formData.level=that.form.level;
			        	formData.repoId=that.form.repoId;
			        	formData.content=that.form.content;
			        	formData.analysis=that.form.analysis;
			        	formData.answer=JSON.stringify(that.form.answerList);
			        	$.operate.save(prefix + "/edit", formData);
			        })

				}
			},
			created(){
				this.form.repoList = repoListData;
				this.form.id = id;
				this.form.quType = quType;
				this.form.repoId = repoId;
				this.form.level = level;
				this.form.content = content;
				this.form.analysis = analysis;
				this.form.id = id;
				this.form.answerList = answerList;
			}
		})
		function submitHandler() {
			vObj.submitForm();
		}
	</script>
</body>
</html>
